<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<head th:include="template::head">

</head>
<body class="hold-transition sidebar-mini sidebar-collapse ng-cloak" ng-app="ESL" style="min-width: 1200px">
<div class="wrapper" ng-controller="store_manager">
  <!-- Navbar -->
    <header th:include="template::header"></header>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 >门店管理</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active" >门店管理</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-12">

          <!-- /.card -->

          <div class="card">
            <!-- /.card-header -->
            <div class="card-body ">
              <div class="">
                <input type="text" id="storeCode_search" ng-model="search.storeCode" th:placeholder="#{store_manager_storeCode}"/>
                <input type="text" id="storeName_search" ng-model="search.storeName" th:placeholder="#{store_manager_storeName}"/>
                <input sec:authorize="hasRole('ROLE_SUPPERADMIN')" type="text" id="sourceFlag_search" ng-model="search.sourceFlag" th:placeholder="#{store_manager_sourceFlag}"/>
                <button ng-click="loadItems()" class="btn btn-sm btn-primary" th:text="#{action.search}">查询</button>
                <button ng-click="reset()" class="btn btn-sm btn-primary">重置</button>

              </div>
              <div class="table-responsive">
              <table id="tab1" class="table table-bordered table-hover table-condensed" >
                <thead>
                <tr>
                  <th><input type="checkbox"  ng-model="selectAll"   ng-change="changeAll($event)"/></th>
                  <th></th>
                  <th style="white-space: nowrap;"  ><i id="id_sort_icon_storeCode" class="fa fa-fw fa-sort" ng-click="sortBy('storeCode')"></i><span th:text="#{store_manager_storeCode}"></span></th>
                  <th style="white-space: nowrap;" ><i id="id_sort_icon_storeName" class="fa fa-fw fa-sort" ng-click="sortBy('storeName')"></i><span th:text="#{store_manager_storeName}"></span> </th>
                  <th style="white-space: nowrap;"  sec:authorize="hasRole('ROLE_SUPPERADMIN')"><i id="id_sort_icon_sourceFlag" class="fa fa-fw fa-sort" ng-click="sortBy('sourceFlag')" ></i><span >资源标识</span></th>

                  <th style="white-space: nowrap;"  ><i id="id_sort_icon_address" class="fa fa-fw fa-sort" ng-click="sortBy('address')"></i><span >地址</span></th>
                  <th style="white-space: nowrap;" ><i id="id_sort_icon_storeBsidList" class="fa fa-fw fa-sort" ng-click="sortBy('storeBsidList')"></i><span th:text="#{store_manager_bsIdList}"></span> </th>
                  <th style="white-space: nowrap;" ><i id="id_sort_icon_description" class="fa fa-fw fa-sort" ng-click="sortBy('description')"></i><span th:text="#{store_manager_description}"></span> </th>
                  <th style="white-space: nowrap;"  ><i id="id_sort_icon_modifyTime" class="fa fa-fw fa-sort" ng-click="sortBy('modifyTime')"></i><span th:text="#{store_manager_modifyTime}"></span></th>
                  <th style="white-space: nowrap;"  ><i id="id_sort_icon_modifyWho" class="fa fa-fw fa-sort" ng-click="sortBy('modifyWho')"></i><span >修改人</span></th>
                  <th style="white-space: nowrap;">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="store in storeList" ng-click="changeCurrents(store,$event)">

                  <td>
                    <label>
                    <input type="checkbox" value="{{store.storeCode}}" ng-model="store.checked" name="checkbox" ng-click="changeCurrent(store,$event)"/>
                    </label>
                  </td>

                  <td>{{$index+1}}</td>
                  <td>{{store.storeCode}}</td>
                  <td>{{store.storeName}}</td>
                  <td sec:authorize="hasRole('ROLE_SUPPERADMIN')">{{store.sourceFlag}}</td>

                  <td>{{store.address}}</td>
                  <td>
                    <span ng-repeat="storeBsid in store.storeBsidList">{{storeBsid.apId}},</span>
                  </td>
                  <td>{{store.description}}</td>
                  <td>{{store.modifyTime|date:'yyyy/MM/dd HH:mm:ss'}}</td>
                  <td>{{store.modifyWho}}</td>
                  <td><button ng-click="openRelate($event,store)" class="btn btn-sm btn-warning">关联</button>
                    <button ng-click="openRemovePopup($event,store)" class="btn btn-sm btn-danger">删除</button>
                  </td>
                </tr>
                </tbody>
              </table>
              </div>
              <!--page plugin-->
              <navigation th:include="template::page"></navigation>

              </div>

            </div>

            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      <!-- /.row -->
      <div class="modal fade" id="remove_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-sm" role="document" style="margin-top:300px;">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="id_remove_modal_title" th:text="#{sku.removeAlertMsg}"></h4>
              <input type="hidden" id="id_remove_modal_title_hidden" th:value="#{sku.removeAlertMsg}" />
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <span style="color:red">删除门店：{{current.storeName}}</span>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal" th:text="#{action.close}"></button>
              <button type="button" class="btn btn-primary" ng-click="deleteStore()" th:text="#{action.confirm}"></button>
            </div>
          </div>
        </div>
      </div>


      <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">

              <h4 class="modal-title" id="addModalLabel">
                编辑
              </h4>
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
              </button>
            </div>

            <div class="modal-body">
                <p ng-show="current.error" style="color:red">{{current.error}}</p>
              <!--<p ng-show="!addCheckStoreCode()" style="color:red">门店编码必须大于4位字母或数字</p>-->
              <p>
                门店编码：<input  type="text" ng-model="current.storeCode" ng-change="storeCodeChange()"  ng-disabled="current.storeCodeDisabled"/>

                <button ng-click="editStoreCode()" class="btn btn-sm btn-primary">手动输入</button>
                <span>(默认自动生成)</span>
              </p>
                <p>
                  门店名称：<input  type="text" ng-model="current.storeName" />
                  <span ng-show="!addCheckStoreName()" style="color:red">请填写门店名称</span>
                </p>
              <p>
                app_id：<input  type="text" ng-model="current.appId"  />
                <span ng-show="!addCheckAppId()" style="color:red">请填写门店appId</span>
              </p>
              <p>
                  密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码：<input  type="password" ng-model="current.password" />
                <span ng-show="!addCheckPwd()" style="color:red">密码不小于6位</span>
              </p>
              <p>
                确认密码：&nbsp<input  type="password" ng-model="current.pwdConfirm"/>
              <span ng-show="!addCheckPwdConfirm()" style="color:red">两次输入不一致</span>
              </p>
              <p sec:authorize="hasRole('ROLE_SUPPERADMIN')">
                资源标识：&nbsp<input  type="text" ng-model="current.sourceFlag"/>
                <span ng-show="!addCheckSourceFlag()" style="color:red">资源标识不能空</span>
              </p>
              <p>
                门店地址：&nbsp<input  type="text" ng-model="current.address"/>
              </p>
              <p>
                备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注：<textarea ng-model="current.description"></textarea>
              </p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭
              </button>
              <button type="button" class="btn btn-primary" ng-disabled="!addCheckAll()" ng-click="addSubmit()">
                提交更改
              </button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal -->
      </div>

      <!--编辑用户 模态框-->
      <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">

              <h4 class="modal-title" id="editModalLabel">
                编辑
              </h4>
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
              </button>
            </div>
            <ul  class="nav nav-tabs">
              <li class="nav-item">
                <a href="#editInfo" data-toggle="tab" class="nav-item nav-link active" >
                  修改信息
                </a>
              </li>
              <li class="nav-item">
                <a href="#changePwd" data-toggle="tab" class="nav-item nav-link" >
                  修改密码
                </a>
              </li>
            </ul>
            <div class="modal-body">
              <div  class="tab-content">
                  <p ng-show="current.error" style="color:red">{{current.error}}</p>
                <div class="tab-pane fade active show" id="editInfo">

                  <p>
                    门店名称：<input  type="text" ng-model="current.storeName" ng-change="storeNameChange()"  />
                    <span ng-show="!addCheckStoreName()" style="color:red">请填写门店名称</span>
                  </p>
                  <p>
                    app_id：<input  type="text" ng-model="current.appId"  />
                    <span ng-show="!addCheckAppId()" style="color:red">请填写门店appId</span>
                  </p>

                  <p sec:authorize="hasRole('ROLE_SUPPERADMIN')">
                    资源标识：&nbsp<input  type="text" ng-model="current.sourceFlag"/>
                    <span ng-show="!addCheckSourceFlag()" style="color:red">资源标识不能空</span>
                  </p>
                  <p>
                    门店地址：&nbsp<input  type="text" ng-model="current.address"/>
                  </p>
                  <p>
                    备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注：<textarea ng-model="current.description"></textarea>
                  </p>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" ng-disabled="!addCheckStoreName()"  ng-click="addSubmit()">
                      提交更改
                    </button>
                  </div>
                </div>
                <div class="tab-pane fade" id="changePwd">
                  <p>
                    密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码：<input  type="password" ng-model="current.pwd" />
                    <span ng-show="!changeCheckPassword()" style="color:red">密码不小于6位</span>
                  </p>

                  <p>
                    确认密码：&nbsp<input  type="password" ng-model="current.pwdConfirm"/>
                    <span ng-show="!changeCheckPwdConfirm()" style="color:red">两次输入不一致</span>
                  </p>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" ng-disabled="!changeCheckAll()" ng-click="addSubmitChangePwd()">
                      提交更改
                    </button>
                  </div>
                </div>
              </div>

            </div>

          </div><!-- /.modal-content -->
        </div><!-- /.modal -->
      </div>





      <!-- 关联门店模态框（Modal） -->
      <div class="modal fade" id="relateModal" tabindex="-1" role="dialog" aria-labelledby="relateModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">

              <h4 class="modal-title" >
                关联基站(<span style="color:deepskyblue">{{current.storeName}}</span>)
              </h4>

              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
              </button>
            </div>

            <div class="modal-body">

              <div id="myTabContent" class="tab-content">
                <p style="color:red">{{current.error}}</p>
                  <input type="text" ng-model="current.bsId" placeholder="基站ID"/>
                  <button ng-click="addBsid()"  class="btn btn-sm btn-success">新增</button>
                  <table class="table table-bordered table-hover table-condensed">
                    <tr>
                      <td>基站ID</td>
                      <td>操作</td>
                    </tr>
                    <tr ng-repeat="sb in current.storeBsidList">
                      <td><span >{{sb.apId}}</span></td>
                      <td><button ng-click="deleteBsid($event,sb)" class="btn btn-sm btn-danger">删除</button></td>
                    </tr>

                  </table>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                  </div>

              </div>
            </div>

          </div><!-- /.modal-content -->
        </div><!-- /.modal -->
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <footer th:include="template::footer"></footer>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->


</body>
<navigation th:include="template::js"></navigation>
<script th:inline="javascript">


    var top_page=[[#{page.top_page}]];
    var previous_page= [[#{page.previous_page}]];
    var next_page= [[#{page.next_page}]];
    var tail_page=[[#{page.tail_page}]];
    var eslApp=angular.module('ESL',[]);

    eslApp.controller('store_manager',function ($scope,$http) {
        $scope.search ={};
        $scope.storeList=[];
        $scope.menu={"store":true};
        $scope.current={};
        $scope.count = 0;//已选择数量

        $scope.addCheckStoreName=function () {
            return $scope.current.storeName;
        }
        $scope.addCheckAppId=function () {
            return $scope.current.appId;
        }
        $scope.addCheckPwd=function () {
            return $scope.current.password&&$scope.current.password.length>=6
        }
        $scope.addCheckPwdConfirm=function () {
            return $scope.current.pwdConfirm==$scope.current.password
        }

        $scope.addCheckSourceFlag=function () {
            return $scope.current.sourceFlag;
        }
        $scope.addCheckAll=function () {

            return $scope.addCheckStoreName()&&$scope.addCheckPwd()&&$scope.addCheckPwdConfirm()
        }

        //------start   修改密码检验
        $scope.changeCheckPassword=function () {
            return $scope.current.pwd&&$scope.current.pwd.length>=6
        }
        $scope.changeCheckPwdConfirm=function () {
            return $scope.current.pwdConfirm==$scope.current.pwd
        }
        $scope.changeCheckAll=function () {

            return $scope.changeCheckPassword()&&$scope.changeCheckPwdConfirm()
        }
        //-----end   修改密码

        /**
         * 手动输入门店编码开关
         */
        $scope.editStoreCode=function () {
            if($scope.current.storeCodeDisabled){
                $scope.current.storeCodeDisabled=false;

            }else {
                $scope.current.storeCodeDisabled=true;
                $scope.current.storeCode=null;
            }
        }



        $scope.storeCodeChange=function () {
            $scope.current.error=null
        }

        /**
         新增/修改store提交
         */
        $scope.addSubmit=function () {
            $http({
                method:"post",
                url:"/store_rest/add_change_store",
                data:$scope.current,
                headers:{'Content-Type': 'application/json'}
            }).success(function (json) {
                if(json.cmd=="success"){
                    $scope.loadItems()
                    angular.element("#addModal").modal("hide");
                    angular.element("#editModal").modal("hide");
                    alertSuccess()
                }else{

                    $scope.current.error=json.msg
                }

            }).error(function (json) {
                console.log(json.msg)
                $scope.current.error=json.message
            })
        }

        /**
         * 修改密码提交
         */
        $scope.addSubmitChangePwd=function () {
            var params={storeCode:$scope.current.storeCode,password:$scope.current.pwd}
            $http({
                method:"post",
                url:"/store_rest/change_password",
                data:params,
                headers:{'Content-Type': 'application/x-www-form-urlencoded'},
                transformRequest: function(obj) {
                    var str = [];
                    for (var s in obj) {
                        str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s]));
                    }
                    return str.join("&");
                }
            }).success(function (json) {
                if(json.cmd=="success"){
                    $scope.loadItems()
                    angular.element("#editModal").modal("hide");
                    alertSuccess()
                }else{
                    console.log(json.msg)
                    $scope.current.error=json.msg
                }

            }).error(function (json) {
                console.log(json.msg)
                $scope.current.error=json.message
            })
        }



        /**
         * 门店关联基站
         */
        $scope.addBsid=function () {
            $http({
                url:"/store_rest/addBsIdRelate",
                data:{bsId:$scope.current.bsId,storeCode:$scope.current.storeCode},
                method:"post"
            }).success(function (json) {
                if(json.cmd=="success"){
                    $scope. current.storeBsidList.push(json.obj)
                    $scope. current.error=null;
                }else{
                    $scope.current.error=json.msg;
                }

            }).error(function (json) {
                $scope.current.error=json.msg;
            })
        };

        $scope.deleteBsid=function ($event,sb) {
            $event.stopPropagation()

            $http({
                url:"/store_rest/deleteBsidRelate",
                data:{storeCode:$scope.current.storeCode,bsid:sb.apId},
                method:"post"
            }).success(function (json) {

                $scope.current.storeBsidList=json.obj
                $scope.loadItems()
            })
        }


        //点击单个checkbox
        $scope.changeCurrent = function(current, $event) {
            // //计算已选数量 true加， false减
            $scope.count += current.checked ? 1 : -1;
            //判断是否全选，选数量等于数据长度为true
            $scope.selectAll = $scope.count=== $scope.storeList.length;
            //


            $event.stopPropagation();//阻止冒泡

        };

        //单击行选中
        $scope.changeCurrents = function(current, $event) {
            if(current.checked == undefined){
                current.checked = true;
            }else{
                current.checked = !current.checked;
            }
            $scope.changeCurrent(current, $event);
        };

//全选（取消全选
        $scope.changeAll = function($event) {
            angular.forEach($scope.storeList, function(item) {
                item.checked = $scope.selectAll;
            });
            $scope.count = $scope.selectAll ? $scope.storeList.length : 0;

        };





        $scope.gotoPage = function(page) {
            if(page!=0&&!page||page<0||page==$scope.pagination.number||page>=$scope.pagination.totalPages){
                return;
            }
            $scope.page = page;
            $scope.loadItems();
        };
        $scope.changeSize = function() {
            $scope.page =0
            $scope.loadItems();
        };


        pagingScope($scope,{username:false,password:false})


        $scope.init=function (){
            $scope.loadItems()
            // $http({
            //     url:"/user_rest/find_roleAndStore",
            //     method:"post"
            // }).success(function (result) {
            //     $scope.storeList=result.storeList;
            //     $scope.roleList = result.roleList;
            // }).
            // error(function (msg) {
            //     alert(msg.message)
            // })

        }

        $scope.loadItems = function(){
            $http({
                url:"/store_rest/listByPage",
                data:{page : $scope.page, size : $scope.size, sortStr : $scope.sort, sortAscOrDesc : $scope.sortAscOrDesc, 'searchObj' : JSON.stringify($scope.search)},
                method:"post",
                headers:{'Content-Type': 'application/x-www-form-urlencoded'},
                transformRequest: function(obj) {
                    var str = [];
                    for (var s in obj) {
                        str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s]));
                    }
                    return str.join("&");
                }
            }).success(function (json) {
                $scope.storeList = json.content;
                $scope.pagination = getPagination(json, $scope.page);
                $scope.selectAll=false;
            }).
            error(function (msg) {
                alert(msg.message)
            })

        }
        $scope.init()




        $scope.deleteStore=function () {

            $http({
                url:"/store_rest/delete_store",
                params:{"storeId":$scope.currentId},
            }).success(function (result) {
                angular.element("#remove_modal").modal("hide");
                $scope.loadItems()
                alertSuccess()

            }).
            error(function (msg) {
                angular.element("#remove_modal").modal("hide");
                alert(msg.message)
            })
        }




        $scope.openRemovePopup = function($event,store)
        {
            $scope.currentId=store.storeCode
            $scope.current.storeName=store.storeName
            angular.element("#remove_modal").modal("show");

        }



        //
        $scope.openEdit = function($event,store) {
            $event.stopPropagation()
            if(store){
                $scope.current=angular.extend($scope.current,store);
                $scope.current.error=null
                $scope.current.pwd=null;
                $scope.current.pwdConfirm=null;
                $scope.current.newStoreFlag=false;
                angular.element("#editModal").modal("show");
            }else{
                $scope.current={newStoreFlag:true,storeCodeDisabled:true}
                angular.element("#addModal").modal("show");
            }


        }
        $scope.openRelate = function($event,store) {
            $event.stopPropagation()
            angular.extend($scope.current,store);
            $scope.current.error=null;
            $scope.current.bsId=null
            angular.element("#relateModal").modal("show");



        }
        //重置查询
        $scope.reset=function () {
            $scope.search={};
        }


        $scope.stopPropagation=function ($event) {
            $event.stopPropagation()
        }

    });

</script>
</html>
